<template>
    <h2>setup与ref的基本使用</h2>
    <h3>vue2的使用数为{{count}}</h3>
    <button @click="updateCount">更新数据增加</button>
    <button @click="updateCount2">更新数据减少</button>


    <h3>vue3的使用数为{{shuzi}}</h3>
    <button @click="updateshuzi">数字增加</button>
    <button @click="updateshuzi2">数字减少</button>
    
    </template>

<script lang="ts">
    import {
        defineComponent,
        ref
    } from 'vue';

    export default defineComponent({
        name: 'App',
        //需求： 页面打开后可以直接看到一个数据，点击按钮后，该数据可以发生变化
        // Vue2的写法实现
        data() {
            return {
                count: 0 //属性
            }
        },
        methods: { //方法
            updateCount() {
                this.count++
            },
            updateCount2() {
                this.count--
            }
        },

        // vue3的写法实现
        //setup是组合Api的入口函数
        setup() {
            //变量
            // let shuzi = 0这样写是错的 不是响应式的
            //ref是一个函数 作用顶一个响应式的数据 返回的是一个ref对象  里面value属性
            const shuzi = ref(0)
                //方法
            function updateshuzi() {
                shuzi.value++
            }

            function updateshuzi2() {
                shuzi.value--
            }
            //返回的是一个对象
            return {
                //属性
                shuzi,
                //方法
                updateshuzi,
                updateshuzi2
            }
        }
    });
</script>

<style>

</style>